<template>
  <div :id="activeAlarm.id" class="container"></div>
</template>

<script>
import AMap from "AMap";
let map = null;
let marker = null;
export default {
  data() {
    return {
      wxMap: null,
    };
  },
  props: {
    activeAlarm: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {},
  mounted() {
    // this.GaodeMap();
    setTimeout(() => {
      this.roadMap();
    }, 100);
  },
  watch: {
    // activeAlarm: {
    //   deep: true,
    //   handler: function(newV, oldV) {
    //     console.log(map,1);
    //     if (map) {
    //       this.GaodeMap();
    //     }
    //   },
    // },
  },
  methods: {
    roadMap() {
      // vue项目需要先声明 T = window.T，不然后面无法获取到。
      var T = window.T;
      this.wxMap = new T.Map(this.activeAlarm.id, {
        minZoom: 5, //设置最小缩放级别
        maxZoom: 25,
      });
      this.wxMap.centerAndZoom(
        new T.LngLat(117.01811981201172, 36.05330276489258),
        17
      );
      var marker = new T.Marker(
        new T.LngLat(this.activeAlarm.lon, this.activeAlarm.lat)
      );
      this.wxMap.addOverLay(marker);

      // this.wxMap.centerAndZoom(
      //   new T.LngLat(this.activeAlarm.lon, Number(this.activeAlarm.lat) + 10)
      // );
      let label = new T.Label({
        text: `<div class='info'><div>${this.activeAlarm.businessName}</div><div>设备名称：${this.activeAlarm.name}</div><div>报警地址：${this.activeAlarm.position}</div></div>`,
        position: marker.getLngLat(),
        offset: new T.Point(-100, -100),
      });
      this.wxMap.addOverLay(label);
      this.wxMap.centerAndZoom(
        new T.LngLat(this.activeAlarm.lon, Number(this.activeAlarm.lat) + 0.01),
        12
      );
    },
    // GaodeMap() {
    //   map = new AMap.Map(this.activeAlarm.id, {
    //     center: [117.01811981201172, 36.05330276489258], // [纬度，经度]
    //     resizeEnable: true,
    //     zoom: 17,
    //   });
    //   AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
    //     map.addControl(new AMap.ToolBar());
    //     map.addControl(new AMap.Scale());
    //   });
    //   this.addMarker();
    // },
    // 实例化点标记
    // addMarker() {
    //   marker = new AMap.Marker({
    //     position: [this.activeAlarm.lon, this.activeAlarm.lat],
    //     offset: new AMap.Pixel(0, 30),
    //     map: map,
    //   });
    //   map.setFitView([marker]);
    //   marker.setLabel({
    //     direction: "top",
    //     offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
    //     content: `<div class='info'><div class='mb-10'>${this.activeAlarm.businessName}</div><div class='mb-5'>设备名称：${this.activeAlarm.name}</div><div>报警地址：${this.activeAlarm.position}</div></div>`, //设置文本标注内容
    //   });
    // },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.info {
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
  background: #fff;
  color: #000;
  padding: 10px;
}
.tdt-label {
  line-height: inherit !important;
}
</style>
